<template>
  <el-card shadow="never" style="margin-top: 15px">
    <div class="head-container">
      <el-tooltip class="item" effect="dark" content="返回" placement="right-start">
        <el-button type="text" @click="returnEdutaskList" style="margin-left: 10px">
          <svg t="1708609271658" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="5331" width="30" height="30">
            <path d="M257.2 567.1h584.5c29 0 52.5-23.4 52.5-52.2V512c0-28.8-23.5-52.2-52.5-52.2H255.9L431 284.1c20.2-20.3 20.2-53 0-73.3l-0.4-0.4c-20.2-20.3-53.1-20.5-73.6-0.5l-0.5 0.5L71.8 496.1a26.013 26.013 0 0 0 0 36.7l55.7 55.9L352 813.8c20.4 20.5 53.7 20.6 74.3 0.4l0.4-0.4 1.7-1.7c20.3-20.3 20.3-53.1 0-73.4L257.2 567.1z" p-id="5332" fill="#515151"></path>
          </svg>
        </el-button>
      </el-tooltip>
    </div>
    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
      <span class="font-small">学生信息</span>
    </div>
    <div class="table-layout">
      <el-row>
        <el-col :span="6" class="table-cell-title">学生ID</el-col>
        <el-col :span="6" class="table-cell-title">学院</el-col>
        <el-col :span="6" class="table-cell-title">专业</el-col>
        <el-col :span="6" class="table-cell-title">班级</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell">{{advertiserData.studentId}}</el-col>
        <el-col :span="6" class="table-cell">{{advertiserData.collegeName}}</el-col>
        <el-col :span="6" class="table-cell">{{advertiserData.majorName}}</el-col>
        <el-col :span="6" class="table-cell">{{advertiserData.clazzName}}</el-col>
      </el-row>
    </div>
    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
      <span class="font-small">任务信息</span>
    </div>
    <div class="table-layout">
      <el-row>
        <el-col :span="6" class="table-cell-title">任务ID</el-col>
        <el-col :span="6" class="table-cell-title">任务名称</el-col>
        <!--1为拍照打卡 2为扫描二维码 3为摄像头识别 4为答题-->
        <el-col :span="6" class="table-cell-title">任务类型</el-col>
        <el-col :span="6" class="table-cell-title">任务优先级</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell">{{advertiserData.taskId}}</el-col>
        <el-col :span="6" class="table-cell">{{advertiserData.taskName}}</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskType==1">拍照打卡</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskType==2">扫描二维码</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskType==3">摄像头识别</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskType==4">线上答题</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskType==5">任务描述</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskType==0">未知</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.isMainQuest==1">主线任务</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.isMainQuest==2">支线任务</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.isMainQuest==0">未知</el-col>
      </el-row>
      <el-row>
        <!--任务分配方式 1为按照学院分配 2为按照专业分配 3为按照班级分配 4为按照学生分配 5为随机分配-->
        <el-col :span="6" class="table-cell-title">任务分配方式</el-col>
        <!--任务状态：1为启动 2为未启动 3为结束-->
        <el-col :span="6" class="table-cell-title">任务状态</el-col>
        <el-col :span="6" class="table-cell-title">开始时间</el-col>
        <el-col :span="6" class="table-cell-title">结束时间</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskAllocation==1">按照学院分配</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskAllocation==2">按照专业分配</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskAllocation==3">按照班级分配</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskAllocation==4">按照学生分配</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskAllocation==5">随机分配</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskAllocation==0">未知</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskStatus==1">启动</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskStatus==2">未启动</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskStatus==3">结束</el-col>
        <el-col :span="6" class="table-cell" v-if="advertiserData.taskStatus==0">未知</el-col>
        <el-col :span="6" class="table-cell">{{advertiserData.startTime}}</el-col>
        <el-col :span="6" class="table-cell">{{advertiserData.endTime}}</el-col>
      </el-row>

    </div>
    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
      <span class="font-small">任务进度</span>
    </div>
    <div class="table-layout">
      <el-row>
        <!--5为答题类任务正确率不够高，需要重做 4为待完成 3为待审核 2为已完成 1为已结束（任务过期但未做）-->
        <el-col :span="12" class="table-cell-title">任务完成情况</el-col>
        <el-col :span="12" class="table-cell-title">完成时间</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="table-cell" v-if="advertiserData.completionStatus==1">已结束</el-col>
        <el-col :span="12" class="table-cell" v-if="advertiserData.completionStatus==2">已完成</el-col>
        <el-col :span="12" class="table-cell" v-if="advertiserData.completionStatus==3">待审核</el-col>
        <el-col :span="12" class="table-cell" v-if="advertiserData.completionStatus==4">待完成</el-col>
        <el-col :span="12" class="table-cell" v-if="advertiserData.completionStatus==5">答题类任务正确率不够高</el-col>
        <el-col :span="12" class="table-cell" v-if="advertiserData.completionStatus==0">未知</el-col>
        <el-col :span="12" class="table-cell" v-if="advertiserData.completionTime">{{advertiserData.completionTime}}</el-col>
        <el-col :span="12" class="table-cell" v-if="!advertiserData.completionTime">尚未完成</el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default{
  name: "userManagement",
  data() {
    return {
      advertiserData:[],
      id:0,
    }
  },
  methods: {
    async getAdvertiserDetail() {
      try {
        const res = await axios.post('/studentTaskManage/EdutaskDetails/'+this.id);
        if (res.status === 200) {
          this.advertiserData= res.data.data[0];
          console.log('數據', this.advertiserData);
        } else {
          ElMessage('获取广告主数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取广告主数据失败');
      }
    },
    returnEdutaskList(){
      this.$router.push({path:'/taskManagement/EdutaskMonitor'})
    },
  },
  created() {
    this.id = this.list = this.$route.query.id;
  },
  mounted() {
    this.getAdvertiserDetail();
  }
}
</script>
<style scoped>
.icon-svg:hover path {
  fill: #76cb02;
}

.head-container {
  background: #F2F6FC;
  height: 50px;
  margin: -20px -20px 0;
  line-height: 50px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
  display: flex;
  justify-content: center;
}

</style>